<template>
	<div class="refinery-quotation-container">
		<t-card title="炼厂报价" hover-shadow>
			<t-space direction="vertical" size="large" style="width: 100%">
				<t-form ref="form" :data="formData" @reset="onReset" @submit="onSubmit">
					<t-row :gutter="[16, 16]">
						<t-col :span="4">
							<t-form-item label="地区">
								<t-radio-group v-model="formData.region">
									<t-radio-button value="all">全部</t-radio-button>
									<t-radio-button value="hunan">湖南省</t-radio-button>
									<t-radio-button value="sichuan">四川省</t-radio-button>
								</t-radio-group>
							</t-form-item>
						</t-col>
						<t-col :span="4">
							<t-form-item label="状态">
								<t-radio-group v-model="formData.status">
									<t-radio-button value="all">全部</t-radio-button>
									<t-radio-button value="quoted">已报价</t-radio-button>
									<t-radio-button value="unquoted">未报价</t-radio-button>
								</t-radio-group>
							</t-form-item>
						</t-col>
					</t-row>
				</t-form>

				<t-table :data="tableData" :columns="columns" :loading="loading" :pagination="pagination"
					@page-change="onPageChange">
					<!-- <template #status="{ row }">
						<t-tag :theme="row.status === 'quoted' ? 'success' : 'warning'">
							{{ row.status === 'quoted' ? '已报价' : '未报价' }}
						</t-tag>
					</template> -->
					<template #operation="{ row }">
						<t-space>
							<t-button theme="primary" variant="text" @click="handleQuote(row)">
								{{ row.status === 'quoted' ? '今日已报价' : '今日报价' }}
							</t-button>
						</t-space>
					</template>
				</t-table>
			</t-space>
		</t-card>
		<!-- 报价弹窗 -->
		<quote-dialog v-model:visible="quoteDialogVisible" :refinery-data="currentRefinery"
			@submit="handleQuoteSubmit" />
	</div>
</template>

<script setup lang="ts">
	import { MessagePlugin } from 'tdesign-vue-next';
	import { ref, onMounted, reactive } from 'vue';
	import QuoteDialog from './components/QuoteDialog.vue';
	import { getStockPriceList,editRefineryOilType } from '@/api/refinery.ts'

	const loading = ref(false);
	const formData = reactive({
		region: 'all',
		status: 'all',
	});

	const pagination = ref({
		current: 1,
		pageSize: 10,
		total: 0,
	});

	const columns = [
		{ colKey: 'refineryName', title: '炼厂名称', width: 160 },
		{ colKey: 'province', title: '省份', width: 120 },
		{ colKey: 'oilName', title: '当前油品', width: 120 },
		{ colKey: 'gpPrice', title: '今日报价', width: 120 },
		{ colKey: 'useStock', title: '可提库存', width: 120 },
		{ colKey: 'hisPrice', title: '历史报价', width: 120 },
		// { colKey: 'status', title: '状态', width: 100 },
		{ colKey: 'operation', title: '操作', width: 120 },
	];

	const tableData = ref([]);

	// 报价弹窗相关
	const quoteDialogVisible = ref(false);
	const currentRefinery = ref<RefineryData | null>(null);

	interface RefineryData {
		name : string;
		location : string;
		availableStock : string;
		currentProduct : string;
		todayPrice : string;
		historyPrice : string;
		status : string;
	}
	onMounted(() => {
		// 模拟数据，实际项目中应该从API获取
		getRefineryListApi()
	});

	const provinceId = ref()
	const getRefineryListApi = () => {
		getStockPriceList({
			pageNo: pagination.value.current,
			pageSize: pagination.value.pageSize,
			provinceId: provinceId.value == 0 ? null : provinceId.value
		}).then(res => {
			tableData.value = res.list
			pagination.value.total = res.total
		})
	}

	const onPageChange = (curr : number) => {
		pagination.value.current = curr;
	};

	const onSubmit = () => {
		// 处理表单提交
		console.log('form submit');
	};

	const onReset = () => {
		// 处理表单重置
		console.log('form reset');
	};

	const handleQuote = (row : any) => {
		currentRefinery.value = row;
		quoteDialogVisible.value = true;
	};

	const handleQuoteSubmit = (data : any) => {
		// console.log('quote submit', data);
		editRefineryOilType(data).then(res => {
			MessagePlugin.success('报价成功')
			getRefineryListApi()
		})
		// 处理报价提交
	};
</script>

<style lang="less" scoped>
	.refinery-quotation-container {
		padding: 20px;
	}
</style>